<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0078)http://lyt888.club# -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Creative Link Effects</title>

<link rel="stylesheet" type="text/css" href="./normalize.css">
<link rel="stylesheet" type="text/css" href="./demo.css">

<!--必要样式-->
<link rel="stylesheet" type="text/css" href="./component.css">

<link rel="stylesheet" type="text/css" href="chrome-extension://lfjamigppmepikjlacjdpgjaiojdjhoj/css/menu.css"></head>
<body>

<div class="container">

	<section class="color-1">
		<nav class="cl-effect-1">
			<a href="https://layty.gitee.io/">主页</a>
			<a href="http://lyt888.club#">博客</a>
			<a href="http://lyt888.club#">wiki</a>
			<a href="http://lyt888.club#">gitee</a>
			<a href="http://lyt888.club#">coding</a>
		</nav>
	</section>
	
	<section class="color-4">
		<nav class="cl-effect-2">
			<a href="http://lyt888.club#"><span data-hover="Ratatouille">Ratatouille</span></a>
			<a href="http://lyt888.club#"><span data-hover="Lassitude">Lassitude</span></a>
			<a href="http://lyt888.club#"><span data-hover="Murmurous">Murmurous</span></a>
			<a href="http://lyt888.club#"><span data-hover="Palimpsest">Palimpsest</span></a>
			<a href="http://lyt888.club#"><span data-hover="Assemblage">Assemblage</span></a>
		</nav>
	</section>
	
	<section class="color-6">
		<nav class="cl-effect-3">
			<a href="http://lyt888.club#">Palimpsest</a>
			<a href="http://lyt888.club#">Ineffable</a>
			<a href="http://lyt888.club#">Lilt</a>
			<a href="http://lyt888.club#">Mellifluous</a>
			<a href="http://lyt888.club#">Serendipity</a>
		</nav>
	</section>
	
	<section class="color-7">
		<nav class="cl-effect-4">
			<a href="http://lyt888.club#">Woebegone</a>
			<a href="http://lyt888.club#">Lassitude</a>
			<a href="http://lyt888.club#">Murmurous</a>
			<a href="http://lyt888.club#">Palimpsest</a>
			<a href="http://lyt888.club#">Assemblage</a>
		</nav>
	</section>
	
	<section class="color-5">
		<nav class="cl-effect-5">
			<a href="http://lyt888.club#"><span data-hover="Seraglio">Seraglio</span></a>
			<a href="http://lyt888.club#"><span data-hover="Sumptuous">Sumptuous</span></a>
			<a href="http://lyt888.club#"><span data-hover="Scintilla">Scintilla</span></a>
			<a href="http://lyt888.club#"><span data-hover="Palimpsest">Palimpsest</span></a>
			<a href="http://lyt888.club#"><span data-hover="Assemblage">Assemblage</span></a>
		</nav>
	</section>
	
	<section class="color-4">
		<nav class="cl-effect-6">
			<a href="http://lyt888.club#">Umbrella</a>
			<a href="http://lyt888.club#">Ineffable</a>
			<a href="http://lyt888.club#">Lilt</a>
			<a href="http://lyt888.club#">Mellifluous</a>
			<a href="http://lyt888.club#">Serendipity</a>
		</nav>
	</section>
	
	<section class="color-8">
		<nav class="cl-effect-7">
			<a href="http://lyt888.club#">Languor</a>
			<a href="http://lyt888.club#">Lassitude</a>
			<a href="http://lyt888.club#">Murmurous</a>
			<a href="http://lyt888.club#">Palimpsest</a>
			<a href="http://lyt888.club#">Assemblage</a>
		</nav>
	</section>
	
	<section class="color-1">
		<nav class="cl-effect-8">
			<a href="http://lyt888.club#">Imbue</a>
			<a href="http://lyt888.club#">Sumptuous</a>
			<a href="http://lyt888.club#">Scintilla</a>
			<a href="http://lyt888.club#">Propinquity</a>
			<a href="http://lyt888.club#">Harbinger</a>
		</nav>
	</section>
	
	<section class="color-9">
		<nav class="cl-effect-9">
			<a href="http://lyt888.club#"><span>Gossamer</span><span>Sumptuous Heart</span></a>
			<a href="http://lyt888.club#"><span>Ineffable</span><span>Evanescent Life</span></a>
			<a href="http://lyt888.club#"><span>Chatoyant</span><span>Assemblage Love</span></a>
			<a href="http://lyt888.club#"><span>Mellifluous</span><span>Mellifluous Will</span></a>
			<a href="http://lyt888.club#"><span>Serendipity</span><span>Serendipity Cut</span></a>
		</nav>
	</section>
	
	<section class="color-10">
		<nav class="cl-effect-10">
			<a href="http://lyt888.club#" data-hover="Seraglio"><span>Seraglio</span></a>
			<a href="http://lyt888.club#" data-hover="Sumptuous"><span>Sumptuous</span></a>
			<a href="http://lyt888.club#" data-hover="Scintilla"><span>Scintilla</span></a>
			<a href="http://lyt888.club#" data-hover="Palimpsest"><span>Palimpsest</span></a>
			<a href="http://lyt888.club#" data-hover="Assemblage"><span>Assemblage</span></a>
		</nav>
	</section>
	
	<section class="color-4">
		<nav class="cl-effect-11">
			<a href="http://lyt888.club#" data-hover="Desultory">Desultory</a>
			<a href="http://lyt888.club#" data-hover="Sumptuous">Sumptuous</a>
			<a href="http://lyt888.club#" data-hover="Scintilla">Scintilla</a>
			<a href="http://lyt888.club#" data-hover="Propinquity">Propinquity</a>
			<a href="http://lyt888.club#" data-hover="Harbinger">Harbinger</a>
		</nav>
	</section>
	
	<section class="color-5">
		<nav class="cl-effect-12">
			<a href="http://lyt888.club#">Chatoyant</a>
			<a href="http://lyt888.club#">Ineffable</a>
			<a href="http://lyt888.club#">Efficiency</a>
			<a href="http://lyt888.club#">Mellifluous</a>
			<a href="http://lyt888.club#">Serendipity</a>
		</nav>
	</section>
	
	<section class="color-6">
		<nav class="cl-effect-13">
			<a href="http://lyt888.club#">Beleaguer</a>
			<a href="http://lyt888.club#">Lassitude</a>
			<a href="http://lyt888.club#">Murmurous</a>
			<a href="http://lyt888.club#">Palimpsest</a>
			<a href="http://lyt888.club#">Assemblage</a>
		</nav>
	</section>
	
	<section class="color-1">
		<nav class="cl-effect-14">
			<a href="http://lyt888.club#">Ailurophile</a>
			<a href="http://lyt888.club#">Sumptuous</a>
			<a href="http://lyt888.club#">Scintilla</a>
			<a href="http://lyt888.club#">Propinquity</a>
			<a href="http://lyt888.club#">Harbinger</a>
		</nav>
	</section>
	
	<section class="color-3">
		<nav class="cl-effect-15">
			<a href="http://lyt888.club#" data-hover="Desultory">Desultory</a>
			<a href="http://lyt888.club#" data-hover="Sumptuous">Sumptuous</a>
			<a href="http://lyt888.club#" data-hover="Scintilla">Scintilla</a>
			<a href="http://lyt888.club#" data-hover="Propinquity">Propinquity</a>
			<a href="http://lyt888.club#" data-hover="Harbinger">Harbinger</a>
		</nav>
	</section>
	
	<section class="color-11">
		<nav class="cl-effect-16">
			<a href="http://lyt888.club#" data-hover="Languor">Languor</a>
			<a href="http://lyt888.club#" data-hover="Murmurous">Murmurous</a>
			<a href="http://lyt888.club#" data-hover="Lassitude">Lassitude</a>
			<a href="http://lyt888.club#" data-hover="Chatoyant">Chatoyant</a>
			<a href="http://lyt888.club#" data-hover="Palimpsest">Palimpsest</a>
		</nav>
	</section>
	
	<section class="color-4">
		<nav class="cl-effect-17">
			<a href="http://lyt888.club#" data-hover="Languor">Languor</a>
			<a href="http://lyt888.club#" data-hover="Murmurous">Murmurous</a>
			<a href="http://lyt888.club#" data-hover="Lassitude">Lassitude</a>
			<a href="http://lyt888.club#" data-hover="Chatoyant">Chatoyant</a>
			<a href="http://lyt888.club#" data-hover="Palimpsest">Palimpsest</a>
		</nav>
	</section>
	
	<section class="color-6">
		<nav class="cl-effect-18">
			<a href="http://lyt888.club#" data-hover="Desultory">Desultory</a>
			<a href="http://lyt888.club#" data-hover="Sumptuous">Sumptuous</a>
			<a href="http://lyt888.club#" data-hover="Scintilla">Scintilla</a>
			<a href="http://lyt888.club#" data-hover="Propinquity">Propinquity</a>
			<a href="http://lyt888.club#" data-hover="Harbinger">Harbinger</a>
		</nav>
	</section>
	
	<section class="color-5">
		<nav class="cl-effect-19">
			<a href="http://lyt888.club#"><span data-hover="Ratatouille">Ratatouille</span></a>
			<a href="http://lyt888.club#"><span data-hover="Lassitude">Lassitude</span></a>
			<a href="http://lyt888.club#"><span data-hover="Murmurous">Murmurous</span></a>
			<a href="http://lyt888.club#"><span data-hover="Palimpsest">Palimpsest</span></a>
			<a href="http://lyt888.club#"><span data-hover="Assemblage">Assemblage</span></a>
		</nav>
	</section>
	
	<section class="color-1">
		<nav class="cl-effect-20">
			<a href="http://lyt888.club#"><span data-hover="Beleaguer">Beleaguer</span></a>
			<a href="http://lyt888.club#"><span data-hover="Scintilla">Scintilla</span></a>
			<a href="http://lyt888.club#"><span data-hover="Chatoyant">Chatoyant</span></a>
			<a href="http://lyt888.club#"><span data-hover="Palimpsest">Palimpsest</span></a>
			<a href="http://lyt888.club#"><span data-hover="Languor">Languor</span></a>
		</nav>
	</section>
	
	<section class="color-7">
		<nav class="cl-effect-21">
			<a href="http://lyt888.club#">Chatoyant</a>
			<a href="http://lyt888.club#">Ineffable</a>
			<a href="http://lyt888.club#">Efficiency</a>
			<a href="http://lyt888.club#">Mellifluous</a>
			<a href="http://lyt888.club#">Serendipity</a>
		</nav>
	</section>
	
</div><!-- /container -->



</body></html>